<template>
  <div style="font-size: 0.35rem">
    <div
      style="
        display: flex;
        height: 1rem;
        line-height: 1rem;
        padding-left: 0.4rem;
      "
    >
      <p @click="$router.go(-1)"><</p>
      <p style="text-align: center; flex: 1">新建档案</p>
    </div>
    <div style="height: 3rem">
      <van-notice-bar
        wrapable
        :scrollable="false"
        class="text"
        text="根据国家有关规定，就诊人在未实名认证状态下，平台将无法提供诊断、药品、挂号等服务，请及时实名认证！"
      />
      <p
        style="
          width: 2rem;
          height: 0.8rem;
          line-height: 0.8rem;
          text-align: center;
          border-radius: 0.1rem;
          margin-top: 0.3rem;
          background-color: #0099ff;
          color: #fff;
          margin-left: 0.2rem;
        "
      >
        基本信息
      </p>
    </div>
    <div style="width: 100%; height: 12rem; background-color: #f5f4f4">
      <div
        style="width: 96%; height: 2.2rem; margin-left: 2%; margin-top: 0.3rem"
        class="guan"
      >
        <p style="margin-left: 0.2rem">与您的关系:</p>
        <div style="display: flex; margin-top: 0.2rem">
          <div
            style="
              width: 15%;
              height: 1rem;
              line-height: 1rem;
              text-align: center;
              border-radius: 50%;
              background-color: #ccc;
              color: #fff;
              margin-left: 0.1rem;
            "
            class="pei"
            @click="pei"
          >
            配偶
          </div>
          <div
            style="
              width: 15%;
              height: 1rem;
              line-height: 1rem;
              text-align: center;
              border-radius: 50%;
              background-color: #ccc;
              color: #fff;
              margin-left: 0.1rem;
            "
            class="fu"
            @click="fu"
          >
            父母
          </div>
          <div
            style="
              width: 15%;
              height: 1rem;
              line-height: 1rem;
              text-align: center;
              border-radius: 50%;
              background-color: #ccc;
              color: #fff;
              margin-left: 0.1rem;
            "
            class="zi"
            @click="zi"
          >
            子女
          </div>
          <div
            style="
              width: 15%;
              height: 1rem;
              line-height: 1rem;
              text-align: center;
              border-radius: 50%;
              background-color: #ccc;
              color: #fff;
              margin-left: 0.1rem;
            "
            class="qin"
            @click="qin"
          >
            亲戚
          </div>
          <div
            style="
              width: 15%;
              height: 1rem;
              line-height: 1rem;
              text-align: center;
              border-radius: 50%;
              background-color: #ccc;
              color: #fff;
              margin-left: 0.1rem;
            "
            class="py"
            @click="py"
          >
            朋友
          </div>
          <div
            style="
              width: 15%;
              height: 1rem;
              line-height: 1rem;
              text-align: center;
              border-radius: 50%;
              background-color: #ccc;
              color: #fff;
              margin-left: 0.1rem;
            "
            class="qt"
            @click="qt"
          >
            其他
          </div>
        </div>
        <div
          style="
            margin-top: 1rem;
            width: 96%;
            margin-left: 2%;
            height: 1rem;
            background: #fff;
          "
        >
          <p style="margin-left: 0.4rem; line-height: 1rem">
            <span style="color: red">*</span>姓名:
            <input
              type="text"
              v-model="xm"
              style="
                float: right;
                border: none;
                width: 45%;
                height: 0.8rem;
                margin-top: 0.1rem;
              "
              placeholder="请输入真实姓名"
            />
          </p>
        </div>
        <div
          style="
            margin-top: 0.3rem;
            width: 96%;
            margin-left: 2%;
            height: 1rem;
            background: #fff;
          "
        >
          <p style="margin-left: 0.4rem; line-height: 1rem">
            <span style="color: red">*</span>身份证:
            <input
              type="text"
              v-model="sfz"
              style="
                float: right;
                border: none;
                width: 60%;
                height: 0.8rem;
                margin-top: 0.1rem;
              "
              placeholder="请输入真实身份证号码"
            />
          </p>
        </div>
        <div
          style="
            margin-top: 0.3rem;
            width: 96%;
            margin-left: 2%;
            height: 1rem;
            background: #fff;
          "
        >
          <p style="margin-left: 0.4rem; line-height: 1rem">
            <span style="color: red">*</span>出生日期:
            <input
              type="text"
              v-model="csrq"
              style="
                float: right;
                border: none;
                width: 45%;
                height: 0.8rem;
                margin-top: 0.1rem;
              "
            />
          </p>
        </div>
        <div
          style="
            margin-top: 0.3rem;
            width: 96%;
            margin-left: 2%;
            height: 1rem;
            background: #fff;
          "
        >
          <p style="margin-left: 0.4rem; line-height: 1rem">
            <span style="color: red">*</span>性别
            <span style="float: right; margin-top: 0.1rem">
              <van-radio-group v-model="checked" direction="horizontal">
                <van-radio
                  name="1"
                  style="
                    width: 1.2rem;
                    padding-left: 0.1rem;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    border: #ccc 0.01rem solid;
                  "
                  class="nan"
                  >男</van-radio
                >
                <van-radio
                  name="2"
                  style="
                    width: 1.2rem;
                    padding-left: 0.1rem;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    border: #ccc 0.01rem solid;
                  "
                  class="nv"
                  >女</van-radio
                >
              </van-radio-group>
            </span>
          </p>
        </div>
        <div
          style="
            margin-top: 0.3rem;
            width: 96%;
            margin-left: 2%;
            height: 1rem;
            background: #fff;
          "
        >
          <p style="margin-left: 0.4rem; line-height: 1rem">
            <span style="color: red">*</span>联系方式:
            <input
              type="text"
              v-model="sjh"
              style="
                float: right;
                border: none;
                width: 45%;
                height: 0.8rem;
                margin-top: 0.1rem;
              "
              placeholder="请输入手机号码"
            />
          </p>
        </div>
        <button
          style="
            margin-top: 1rem;
            width: 90%;
            height: 1rem;
            background: #0099ff;
            color: #fff;
            margin-left: 5%;
            border: none;
            border-radius: 0.1rem;
            font-size: 0.4rem;
          "
          @click="bc"
        >
          保存
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
const checked = ref('0')
const xm = ref('')
const sfz = ref('')
const csrq = ref('')
const sjh = ref('')

const pei1 = ref('')
const fu1 = ref('')
const zi1 = ref('')
const qin1 = ref('')
const py1 = ref('')
const qt1 = ref('')

const back = () => {
  router.push('/ding')
}

if (sfz.value.length !== 18) {
  showToast('请输入正确的身份证号码')
}
let reg = /^1[3-9]\d{9}$/
if (!reg.test(sjh.value)) {
  showToast('请输入正确的手机号码')
}

const bc = () => {
  if (
    !localStorage.getItem('pei') &&
    !localStorage.getItem('fu') &&
    !localStorage.getItem('zi') &&
    !localStorage.getItem('qin') &&
    !localStorage.getItem('py') &&
    !localStorage.getItem('qt')
  ) {
    showToast('请选择关系')
  } else if (xm.value == '') {
    showToast('请输入姓名')
  } else if (sfz.value == '') {
    showToast('请输入身份证号码')
  } else if (csrq.value == '') {
    showToast('请输入出生日期')
  } else if (checked.value == '0') {
    showToast('请选择性别')
  } else if (sjh.value == '') {
    showToast('请输入手机号码')
  } else if (sjh.value.length != 11) {
    showToast('请输入正确的手机号码')
  } else {
    showToast('保存成功')
    const guan = localStorage.setItem(
      'guan',
      JSON.stringify({
        pei1: localStorage.getItem('pei') || '',
        fu1: localStorage.getItem('fu') || '',
        zi1: localStorage.getItem('zi') || '',
        qin1: localStorage.getItem('qin') || '',
        py1: localStorage.getItem('py') || '',
        qt1: localStorage.getItem('qt') || '',
      }),
    )
    const dang = localStorage.setItem(
      'dang',
      JSON.stringify({
        xm: xm.value,
        sfz: sfz.value,
        csrq: csrq.value,
        sjh: sjh.value,
        checked: checked.value,
      }),
    )

    setTimeout(()=>{
      router.back()
    },800)
  }
}

const pei = () => {
  const pei = localStorage.setItem('pei', '配偶')
  localStorage.removeItem('fu')
  localStorage.removeItem('zi')
  localStorage.removeItem('qin')
  localStorage.removeItem('py')
  localStorage.removeItem('qt')
}
const fu = () => {
  const fu = localStorage.setItem('fu', '父母')
  localStorage.removeItem('pei')
  localStorage.removeItem('zi')
  localStorage.removeItem('qin')
  localStorage.removeItem('py')
  localStorage.removeItem('qt')
}
const zi = () => {
  const zi = localStorage.setItem('zi', '子女')
  localStorage.removeItem('pei')
  localStorage.removeItem('fu')
  localStorage.removeItem('qin')
  localStorage.removeItem('py')
  localStorage.removeItem('qt')
}
const qin = () => {
  const qin = localStorage.setItem('qin', '亲戚')
  localStorage.removeItem('pei')
  localStorage.removeItem('fu')
  localStorage.removeItem('zi')
  localStorage.removeItem('py')
  localStorage.removeItem('qt')
}
const py = () => {
  const py = localStorage.setItem('py', '朋友')
  localStorage.removeItem('pei')
  localStorage.removeItem('fu')
  localStorage.removeItem('zi')
  localStorage.removeItem('qin')
  localStorage.removeItem('qt')
}
const qt = () => {
  const qt = localStorage.setItem('qt', '其他')
  localStorage.removeItem('pei')
  localStorage.removeItem('fu')
  localStorage.removeItem('zi')
  localStorage.removeItem('qin')
  localStorage.removeItem('py')
}
</script>

<style scoped>
.guan {
  background: #fff !important;
}
.pei:hover {
  background: #0099ff !important;
}
.fu:hover {
  background: orange !important;
}
.zi:hover {
  background: rgb(122, 235, 229) !important;
}
.qin:hover {
  background: rgba(164, 124, 243, 0.916) !important;
}
.py:hover {
  background: rgb(234, 139, 230) !important;
}
.qt:hover {
  background: rgb(164, 199, 198) !important;
}
</style>
